<template>
  <div class="rightMain_bottom" >
    <div class="rightMain_bottomIn" style="height: 28em;">
      <h3>{{ $t('威胁信息日志') }}</h3>
      <div class="biaoge biaoge_list" style="width:100%; height:90%">
        <div class="biaoge_listIn">
          <ul class="ul_title">
            <li class="text-right">{{ $t('类型') }}</li>
            <li>{{ $t('等级') }}</li>
            <li>{{ $t('源IP') }}</li>
            <li>{{ $t('目的IP') }}</li>
          </ul>
          <div class="ul_list" style="overflow: hidden;">
            <div class="ul_listIn" v-for="(item,index) in ThreatData" :key="index">
              <ul class="ul_con" >
                <li>{{item.attackType}}</li>
                <li>{{item.threatLevel}}</li>
                <li>{{item.srcIp}}</li>
                <li>{{item.destIp}}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="transparent-table">
        <el-table :data="ThreatData" stripe style="background-color: transparent;">
          <el-table-column label="类型" type="index" width="80">
            <template #default="{row}">
              {{ row.attackType }}
            </template>
          </el-table-column>
          <el-table-column>
          </el-table-column>
        </el-table>
      </div> -->
      <Border/>
    </div>
  </div>
</template>

<script setup>
import Border from "./view/Border.vue";
import { ref } from 'vue'
import { getThreatData } from '~/api/screen'

const ThreatData = ref([])
getThreatData().then(res => {
  console.log('right_bot',res)
  ThreatData.value = res.data.items
})
</script>
<style scoped>
.transparent-table {
  background-color: transparent;
}

.el-table {
  --el-table-border-color: '';
  /* --el-table-border: 1px solid var(--el-table-border-color); */
  --el-table-text-color: #fff /* 自定义文本颜色 */;
  --el-table-header-text-color: #fff /* 自定义表头文本颜色 */;
  /* --el-table-row-hover-bg-color: var(--el-fill-color-light); */
  /* --el-table-current-row-bg-color: var(--el-color-primary-light-9); */
  --el-table-header-bg-color: transparent;
  /* --el-table-fixed-box-shadow: var(--el-box-shadow-light); */
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-expanded-cell-bg-color: /* 自定义展开行单元格的背景颜色 */ ;
  --el-table-fixed-left-column: /* 自定义左固定列的样式 */ ;
  --el-table-fixed-right-column: /* 自定义右固定列的样式 */ ;
}


</style>